import {defineComponent, ref, onMounted, computed, watch} from 'vue';
import BreadCrumb from '~/src/components/BreadCrumb';
import ButtonSelect from '~/src/components/ButtonSelect';
import Item from '~/src/components/ButtonSelect/item';
import ButtonTag from '~/src/components/ButtonTag';
import Input from '~/src/components/Input';
import Pagination from '~/src/components/Pagination';
import SelectTag from '~/src/components/SelectTag';
import Table from '~/src/components/table';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import zwsj from "@/assets/images/zwsj.png";
import Keyboard from "@/components/keyboard";
import {getMzjf, getPrice} from "@/api/his";
import {TableItem} from "@/types";
import {closeLoading, showLoading} from "@/utils";

// 定义数据类型
interface OptionItem {
    label: string;
    value: string;
}



export default defineComponent({
    setup() {
        const selectKey = ref('');
        const options = ref<OptionItem[]>([]);
        const tableData = ref<TableItem[]>([]);
        // const loading = ref(true);
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const pageSize = ref(0);
        if (KEEP_VIDEO_TOP){
            pageSize.value = 7;
        }else{
            pageSize.value = 15;
        }

        const isKeyboardShow = ref(false); // 控制键盘显示/隐藏
        const searchValue = ref(''); // 输入框+键盘的同步值
        const pageNum = ref(1); //当前页码
        const total = ref(0); //总条数
        /** 1. 点击输入框时显示键盘 */
        const handleInputClick = () => {
            isKeyboardShow.value = true;
        };

        /** 2. 键盘值同步到输入框（接收 Keyboard 的 update:value 事件） */
        const handleKeyboardValueChange = (val: string) => {
            searchValue.value = val;
        };
        /** 3. 点击键盘“确定”时触发的处理逻辑（如筛选表格数据） */
        const handleKeyboardSubmit = (val: string) => {
            if (val === ''){
                return;
            }
            isKeyboardShow.value = false; // 先隐藏键盘
            pageNum.value = 1; // 重置页码
            getPriceData();

        };

        // 模拟的选项假数据
        const mockOptions: OptionItem[] = [
            { label: '药品', value: 'yp' },
            { label: '项目', value: 'xm' },
            { label: '材料', value: 'cl' }
        ];

        // 模拟的表格假数据
        const mockTableData = {
            // 药品数据
            yp: [
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '氨茶碱片', YYXMGG: '0.1g*100片', YYKFDWMC: '瓶', XMDJ: '7.57' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '氨茶碱注射液', YYXMGG: '10ml:0.25g', YYKFDWMC: '瓶', XMDJ: '1.90' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '地西泮(安定)片', YYXMGG: '2.5mg*100000片', YYKFDWMC: '盒', XMDJ: '22.00' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '布洛芬片', YYXMGG: '0.1g*100片', YYKFDWMC: '瓶', XMDJ: '5.20' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '布洛芬混芬混芬混悬液', YYXMGG: '100ml:2g', YYKFDWMC: '瓶', XMDJ: '1112.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '头孢拉定胶囊', YYXMGG: '0.25g*24000粒', YYKFDWMC: '盒', XMDJ: '1115.60' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '头孢曲松钠注射液', YYXMGG: '00001.0g/支', YYKFDWMC: '支', XMDJ: '1119.30' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '左氧氟沙星片', YYXMGG: '0.5g*14片', YYKFDWMC: '盒', XMDJ: '211118.50' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '左氧氟沙星注射液', YYXMGG: '100ml:0.5g', YYKFDWMC: '瓶', XMDJ: '111118.70' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '阿司匹林', YYXMGG: '1000mg*30片', YYKFDWMC: '盒', XMDJ: '1111118.90' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '葡萄糖注射液', YYXMGG: '500ml:25g', YYKFDWMC: '瓶', XMDJ: '3.10' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '氯化钠注射液', YYXMGG: '250ml:2.25g', YYKFDWMC: '瓶', XMDJ: '2.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '维生素C片', YYXMGG: '0.1g*100片', YYKFDWMC: '瓶', XMDJ: '4.50' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '维生素C注射液', YYXMGG: '2ml:0.5g', YYKFDWMC: '支', XMDJ: '1.20' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '维生素B6片', YYXMGG: '10mg*100片', YYKFDWMC: '瓶', XMDJ: '3.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '维生素B6注射液', YYXMGG: '1ml:50mg', YYKFDWMC: '支', XMDJ: '0.90' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '盐酸氨溴索口服溶液', YYXMGG: '100ml:300mg', YYKFDWMC: '瓶', XMDJ: '19.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '盐酸氨溴索注射液', YYXMGG: '2ml:15mg', YYKFDWMC: '支', XMDJ: '3.50' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '硝苯地平片', YYXMGG: '10mg*100片', YYKFDWMC: '瓶', XMDJ: '6.70' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '硝苯地平控释片', YYXMGG: '30mg*7片', YYKFDWMC: '盒', XMDJ: '25.30' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '辛伐他汀片', YYXMGG: '20mg*10片', YYKFDWMC: '盒', XMDJ: '9.20' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '阿托伐他汀钙片', YYXMGG: '20mg*7片', YYKFDWMC: '盒', XMDJ: '32.60' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '马来酸氯苯那敏片', YYXMGG: '4mg*100片', YYKFDWMC: '瓶', XMDJ: '2.90' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '氯雷他定片', YYXMGG: '10mg*6片', YYKFDWMC: '盒', XMDJ: '11.50' },
            ],
            // 项目数据
            xm: [
                // {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '检查', YYXMGG: '检查', YYKFDWMC: '检查', XMDJ: '0.00' },
                // {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '检查', YYXMGG: '检查', YYKFDWMC: '检查', XMDJ: '0.00' },
            ],
            // 材料数据
            cl: [
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '医用口罩', YYXMGG: '一次性', YYKFDWMC: '个', XMDJ: '1.50' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '手术手套', YYXMGG: '无菌', YYKFDWMC: '副', XMDJ: '3.20' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '注射器', YYXMGG: '5ml', YYKFDWMC: '支', XMDJ: '0.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '针管', YYXMGG: '0.5ml*10支', YYKFDWMC: '支', XMDJ: '1.20' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '针具', YYXMGG: '10支', YYKFDWMC: '支', XMDJ: '1.50' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '止痛药', YYXMGG: '一次性', YYKFDWMC: '片', XMDJ: '1.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '止痛剂', YYXMGG: '一次性', YYKFDWMC: '支', XMDJ: '1.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '止痛针', YYXMGG: '一次性', YYKFDWMC: '支', XMDJ: '1.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川",YYXMMC: '止痛液', YYXMGG: '100ml*10支', YYKFDWMC: '支', XMDJ: '1.80' },
                {FYFL_ID:"0",FYFL_MC:"药品",PYM:"aaa",YYXMDM:"2",YYXMSCCJ:"四川", YYXMMC: '止痛膏', YYXMGG: '一次性', YYKFDWMC: '瓶', XMDJ: '1.80' },
            ]
        };
        // 表格表头
        const tableColumns = ref([
            {
                title: '名称',
                dataIndex: 'YYXMMC',
                align: "left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold" }, // 使用 'bold' 等符合 FontWeightProperty 的值
            },
            {
                title: '规格',
                dataIndex: 'YYXMGG',
                align:"left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '单位',
                dataIndex: 'YYKFDWMC',
                align: "left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '单价',
                dataIndex: 'XMDJ',
                align: "left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold"},
            },
        ]);
        // 初始化数据
        const initData = () => {

                // 设置选项数据
                options.value = mockOptions;

                // 默认选中第一个选项
                if (options.value.length > 0) {
                    selectKey.value = options.value[0].value;
                    //查询第一个选项对应的数据
                    // 加载对应表格数据
                    // tableData.value = mockTableData[selectKey.value as keyof typeof mockTableData] || [];
                }


        };

        // 监听选项变化，更新表格数据
        const handleSelectChange = (value: any) => {
            selectKey.value = value.value;
            pageNum.value = 1;// 重置页码
            // tableData.value = mockTableData[value.value as keyof typeof mockTableData] || [];
        };

        // 监听selectKey和pageNum的变化
        watch(() => [selectKey.value, pageNum.value], () => {
            getPriceData();
        }, { immediate: true })
        //获取项目数据
        async function getPriceData() {
            showLoading();
            console.log("当前页", pageNum.value, "每页数量", pageSize.value, "类型", selectKey.value, "搜索内容", searchValue.value)
            const res = await getPrice({
                pageNum: pageNum.value,
                pageSize: pageSize.value,
                xm: selectKey.value,
                selectContent: searchValue.value,
            })
            tableData.value = res.rows!;
            total.value = res.total!;
            closeLoading();
        }


        // 组件挂载时初始化数据
        onMounted(() => {
            initData();
            getPriceData();
        });
        //  分页组件数据更新 分页当前页 展示的数据
        const showDatas = ref();
        const handlePageNumChange = (num: number) => {
            pageNum.value = num;
        };
        return () => (<>
            <div class={Style.top}>
                <UserInfo></UserInfo>
                <div class={Style.container_mar} >
                    <div class={Style.body}>
                        <div style={{margin: '40px 0'}} class={Style.title}>
                            <div style={{ display: 'flex' }}>
                                {
                                    <ButtonSelect
                                        v-model={selectKey.value}
                                        onChange={handleSelectChange}
                                    >
                                        {options.value.map((option, index) => (
                                            <Item
                                                key={option.value}
                                                label={option.label}
                                                value={option.value}
                                                class={[Style.tag, selectKey.value === option.value ? Style.active : ""]}
                                                style={index > 0 ? { marginLeft: '16px' } : {}}
                                            ></Item>
                                        ))}
                                    </ButtonSelect>
                                }
                            </div>

                            <div class={Style.search}>
                                <Input
                                    placeholder='输入名称首字母'
                                    modelValue={searchValue.value} // 绑定搜索值
                                    onClick={handleInputClick} // 点击显示键盘
                                    // 禁用原生输入（完全依赖键盘组件）
                                    readonly
                                ></Input>
                            </div>

                        </div>
                        {/*{tableData.value.length > 0 ?*/}
                            <Table
                                // 传递表头配置
                                columns={tableColumns.value}
                                // 传递分页后的数据（showDatas）
                                data={tableData.value}
                                // 传递表格样式（匹配原有需求：宽度90%）
                                tableStyle={{  }}
                                // 传递容器样式（可选，控制Table外层容器）
                                containerStyle={{width: "90%",height: "100%" }}
                            ></Table>
                        {/*:*/}
                        {/*    <div style={{marginTop:'-5%'}}>*/}
                        {/*        <img src={zwsj} style={{width:'100%',height:'100%'}}/>*/}
                        {/*    </div>*/}
                        {/*}*/}

                    </div>
                    {/*后端分页*/}
                    <Pagination
                        style={{margin: '0 63px'}}
                        type={1}//后端 需加 分页类型 1后端分页
                        pageSize={pageSize.value}
                        pageNum={pageNum.value}
                        total={total.value}
                        onPageNumChange={handlePageNumChange}
                    ></Pagination>
                </div>
            </div>
                {/* 新增：键盘组件 - 绑定所有属性和事件 */}
                <Keyboard
                    type="letter" // 键盘类型：/数字字母 normal  /纯字母 letter  /纯数字 number"
                    modelValue={isKeyboardShow.value} // 控制显示/隐藏
                    value={searchValue.value} // 双向同步输入值
                    onUpdate:modelValue={(val) => isKeyboardShow.value = val} // 接收键盘关闭事件
                    onUpdate:value={handleKeyboardValueChange} // 接收键盘输入值
                    onKeySubmit={handleKeyboardSubmit} // 接收键盘确定事件
                />
            </>
        );
    }
})

